<!--  -->
<template>
<div class='innexForm'>
  <el-form v-if="windowShow" :model="formData"
            ref="formData"
            :disabled="true"
            label-width="100px"
            size="mini">
    <el-row :gutter="10">
      <el-col :span="24">
        <el-form-item label="网格"
                      prop="allGridIdArr">
          <div class="block">
                <el-cascader placeholder="暂无内容"
                  :options="treeOption"
                  style="width:100%"
                  filterable
                  clearable
                  :props="gridIdProps"
                  v-model="formData.allGridIdArr">
                </el-cascader>
              </div>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="小区名称"
                      prop="name">
          <el-input v-model="formData.name"
                    placeholder="暂无内容"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="楼栋数"
                      prop="buildingNum">
          <el-input v-model="formData.buildingNum"
                    placeholder="暂无内容"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="总户数">
          <el-input v-model="formData.familyNum"
                    placeholder="暂无内容"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="总面积(㎡)"
                      prop="allArea">
          <el-input v-model="formData.allArea"
                    placeholder="暂无内容"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="住宅面积(㎡)"
                      prop="houseArea">
          <el-input v-model="formData.houseArea"
                    placeholder="暂无内容"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="商业面积(㎡)"
                      prop="businessArea">
          <el-input v-model="formData.businessArea"
                    placeholder="暂无内容"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否有物业"
                      prop="hasProperty">
          <el-select filterable
                          v-model="formData.hasProperty"
                          placeholder="暂无内容">
                <el-option :key="0"
                            :value="0"
                            label="无物业"></el-option>
                <el-option :key="1"
                            :value="1"
                            label="有物业"></el-option>
              </el-select>
        </el-form-item>
      </el-col>
      <template v-if='formData.hasProperty'>
        <el-col :span="12">
          <el-form-item label="物业用房面积(㎡)"
                        prop="propertyArea">
            <el-input v-model="formData.propertyArea"
                      placeholder="暂无内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="物业公司"
                        prop="propertyCompany">
            <el-input v-model="formData.propertyCompany"
                      placeholder="暂无内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="物业负责人"
                        prop="propertyPrincipal">
            <el-input v-model="formData.propertyPrincipal"
                      placeholder="暂无内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话"
                        prop="propertyPhone">
            <el-input v-model="formData.propertyPhone"
                      placeholder="暂无内容"></el-input>
          </el-form-item>
        </el-col>
      </template>
      <el-col :span="24">
        <el-form-item label="备注"
                          style="width:100%"
                          prop="remark">
              <el-input v-model="formData.introduction"
                        type="textarea"
                        :rows="3"
                        placeholder="暂无内容"></el-input>
            </el-form-item>
      </el-col>
      <el-col :span="24" v-if="formData.communityPic">
        <el-form-item label="照片">
          <app-upload ref="appUpload"
                      v-model="formData.communityPic"></app-upload>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <div slot="footer" class="dialog-footer"  v-if="windowShow">
    <el-button class="spical-btn" @click="handleCheckList" type="primary">查看楼栋</el-button>
  </div>
  <template v-if="!windowShow">
    <div class="toback">
      <el-button type="primary" @click="toback" plain>返回</el-button>
    </div>
    <app-table :page-data="buildingData" class="spcial-table"
    :table-columns="tableColumns"
    v-on:currentChange="handleCurrentChange"/>
  </template>
</div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getUserGridTree } from '@/utils/SessionDataUtil'
import AppUpload from '@/components/AppUpload'
import AppTable from '@/components/MinAppTable'
import {getCommunity, findBuilding} from '@/http/FangWuGuanLiApi'
import { getAllRegion } from '@/utils/region'
export default {
// import引入的组件需要注入到对象中才能使用
  name: 'commityForm',
  props: {
    detailForm: {
      type: Object,
      default: function () {
        return {
        }
      }
    }
  },
  components: {AppUpload, AppTable},
  data () {
    // 这里存放数据
    return {
      formData: {},
      treeData: [],
      buildingData: {},
      queryData: {},
      showMap: false,
      windowShow: true,
      treeOption: [],
      gridIdProps: {
        label: 'name',
        value: 'id'
      },
      tableColumns: [
        { label: '楼栋名称', prop: 'buildingName' },
        { label: '小区名称', prop: 'communityName' },
        { label: '单元数', prop: 'unitNum' },
        { label: '户数', prop: 'familyNum' },
        { label: '楼栋长', prop: 'buildingLeaderName' },
        { label: '地图标注', prop: 'mapMarkStatus' }
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 方法集合
  methods: {
    getTreeData () {
      let gridTree = getUserGridTree()
      if (gridTree && gridTree instanceof Array) {
        this.treeData = gridTree
        this.treeOption = gridTree
      }
    },
    getCommity (id) {
      getCommunity(id).then(resp => {
        if (resp.code && resp.code === '200') {
          this.formData = resp.data
          let regionData = {}
          regionData.id = this.formData.gridId
          regionData.items = this.treeData
          let gridIdArr = getAllRegion(regionData)
          this.$set(this.formData, 'allGridIdArr', gridIdArr)
        }
      })
    },
    handleCheckList () {
      this.queryData.communityId = this.formData.id
      this.windowShow = false
      findBuilding(this.queryData).then(resp => {
        if (resp.code && resp.code === '200') {
          this.buildingData = resp.data
        }
      })
    },
    handleCurrentChange (val) {
      this.queryData.offset = (val - 1) * 10
      this.handleCheckList()
    },
    toback () {
      this.windowShow = true
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.getTreeData()
  },
  watch: {
    detailForm: {
      handler: function (data) {
        this.formData = JSON.parse(JSON.stringify(data))
        this.getCommity(this.formData.id)
        this.windowShow = true
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style scoped>
.el-form >>> .el-input__inner {
  height: 37px;
  background: none
}
.el-form >>> .el-textarea__inner, .el-form >>> .el-upload  {
  background: none
}
.el-form >>> .el-form-item__label {
  line-height: 37px;
  color:#fff;
}
.el-form >>> .el-cascader__label {
  line-height: 37px;
}
.el-form >>> .el-select.el-select--mini {
  width: 100%
}
</style>
